import React,{useState,useEffect} from 'react';
import { FormattedMessage } from 'umi';
import { useModel } from '@umijs/max';
import { Button } from 'antd';
export default function Page() {
  console.log('useModel', useModel)
  const userModel = useModel('userModel');
  const { counter, add, minus } = useModel('counterModel');
  return (
    <div>
      <FormattedMessage id="welcome" />
      <p>{userModel.user.username}</p>
      <p>{counter}</p>
      <p><button onClick={add}>+</button></p>
      <p><button onClick={minus}>-</button></p>
      <p><CustomButton type='primary'>按钮</CustomButton></p>
      <p><CountDownButton/></p>
    </div>
  );
}

/**
 * 1.确定需求 确定你要封装哪个组件，实现哪个需求，符合何种规范
 * 2.创建基础组件，基于原始的组件，创建你自己的基础组件，创建一个自定义的按钮，该按钮具有
 * 特定的大小和颜色和行为
 * 3.完成额外的功能 为组件添加额外的功能
 * 4.在封装完成功后要进行充分测试，保证功能正常
 * 5.为了让别人更好的使用，还需要编写详细而完善的文档
 */
function CustomButton({ ...rest }) {
  const handleClick = () => {
    alert(' button click');
  }
  return (
    <Button {...rest} onClick={handleClick} />
  )
}

function CountDownButton({ ...rest }) {
  const [count,setCount] = React.useState(0);
  useEffect(()=>{
    const $interval = setInterval(()=>{
      setCount(count=>count+1);
    },1000);
    return ()=>clearInterval($interval);
  },[]);
  return (
    <Button {...rest}>{count}</Button>
  )
}